<template>
    <div>
        <h2>流程管理</h2>
        <el-button type="primary" @click="NewFlow">新建流程</el-button>
        <el-dialog title="新建业务" :visible.sync="flowDialog">
            <div>
                <span>流程名：</span>
                <el-input
                    v-model="flowInfo.name"
                    placeholder="请输入流程名"
                    style="width: 75%"
                ></el-input><br/><br/>
				<span>部门名：</span>
				<el-input
                    v-model="flowInfo.deptId"
                    placeholder="请输入流程隶属的部门"
                    style="width: 75%"
                ></el-input>&nbsp;
				<el-button @click="AddNode(0)" size="small" v-if="nodesArray.length==0">+增加节点</el-button>
            </div>
			 <el-divider></el-divider>
            <div v-for="(item, index) in nodesArray" :key="(item, index)">
                节点名：
				<el-input
                    v-model="item.name"
                    placeholder="请输入节点名"
                    style="width: 80%"
                ></el-input>
				<br/><br/>
				关联该节点的用户：
                <el-input
                    v-model="item.relatedUserId"
                    placeholder="请输入关联该节点的用户"
                    style="width: 69%"
                ></el-input><br/><br />
                <el-button @click="AddNode(index)" size="small">+增加节点</el-button>
				<el-divider></el-divider>
            </div>
            <br />
            <el-button @click="PublishFlow" type="primary">发布流程</el-button>
        </el-dialog>
    </div>
</template>

<script>
//未完成：部门名应该是通过树形结构选择的
//用户名应该是选择出来的
import { nanoid } from "nanoid"; //生成id的接口
//这里写页面的事务
export default {
    data() {
        return {
            flowDialog: false,
            flowInfo: {
                id: undefined,//流程Id
                name: undefined,//流程名
                userId: undefined,//建立该流程的用户id	
                deptId: undefined,//该流程隶属的部门id
                formId: undefined,//该流程关联的表单id
                nodes: undefined,//该流程有的节点数
            },
            nodesArray: [], //节点数组
        };
    },
    methods: {
        //新建流程
        NewFlow() {
            this.flowDialog = true;
        },
        //发布流程
        PublishFlow() {
            // console.log(getUserInfo());获取user部门、角色、权限的方法
            // console.log(this.$store.state.user);//获取user信息的方法
            this.flowInfo.deptId="1";//实际上这里是应选择部门id，由于部门列表接口还未实现，先这样将就
            this.flowInfo.formId="1";//这里应该是选择的
			this.flowInfo.id=nanoid();
			//打包数据
            var params = {
                flowInfo:this.flowInfo,
                nodesArray:this.nodesArray
            };
            //调用接口，发布流程
            publishFlow(params)
                .then((response) => {
                    console.log(response);
                    this.$message({
                        message: "发布流程成功",
                        type: "success",
                    });
                    //初始化数据，收尾
                    this.flowInfo={
						id: undefined,//流程Id
						name: undefined,//流程名
						userId: undefined,//建立该流程的用户id	
						deptId: undefined,//该流程隶属的部门id
						formId: undefined,//该流程关联的表单id
						nodes: 0,//该流程有的节点数
                    };
                    this.nodesArray=[];
                    this.flowDialog = false;
                })
                .catch((error) => {
                    console.log(error);
                });
		},
        //增加节点
        AddNode(i) {
			var node={
				id:nanoid(),
				name:undefined,//节点名
				flowId:this.flowInfo.id,
				order:++this.flowInfo.nodes,
				last:undefined,
				relatedUserId:undefined,//关联该节点的用户
			};
			this.nodesArray.splice(i,0,node);

		},
    },
};
</script>